// Button Variables
$btn-colors: (
  'default': (
    base: var(--btn-default-bg),
    hover: color-mix(in srgb, var(--btn-default-bg) 50%, white),
    lhover: color-mix(in srgb, var(--btn-default-bg) 70%, black),
    light: color-mix(in srgb, var(--btn-default-bg) 40%, white),
    text: var(--text-color),
    ptext: var(--text-color)
  ),
  'primary': (
    base: var(--primary),
    hover: color-mix(in srgb, var(--primary) 80%, white),
    lhover: color-mix(in srgb, var(--primary) 40%, white),
    light: color-mix(in srgb, var(--primary) 10%, white),
    text: var(--primary),
    ptext: #ffffff
  ),
  'info': (
    base: var(--info),
    hover: color-mix(in srgb, var(--info) 80%, white),
    lhover: color-mix(in srgb, var(--info) 40%, white),
    light: color-mix(in srgb, var(--info) 10%, white),
    text: var(--info),
    ptext: #ffffff
  ),
  'success': (
    base: var(--success),
    hover: color-mix(in srgb, var(--success) 80%, white),
    lhover: color-mix(in srgb, var(--success) 40%, white),
    light: color-mix(in srgb, var(--success) 10%, white),
    text: var(--success),
    ptext: #ffffff,
  ),
  'warning': (
    base: var(--warning),
    hover: color-mix(in srgb, var(--warning) 80%, white),
    lhover: color-mix(in srgb, var(--warning) 40%, white),
    light: color-mix(in srgb, var(--warning) 10%, white),
    text: var(--warning),
    ptext: #ffffff
  ),
  'error': (
    base: var(--error),
    hover: color-mix(in srgb, var(--error) 80%, white),
    lhover: color-mix(in srgb, var(--error) 40%, white),
    light: color-mix(in srgb, var(--error) 10%, white),
    text: var(--error),
    ptext: #ffffff
  )
) !default;

// Generate CSS Variables
:root {
  --text-color: #374151;
  --primary: #3b82f6;
  --info: #06b6d4;
  --success: #22c55e;
  --warning: #eab308;
  --error: #ef4444;
  --border-color: #e5e7eb;
  --bg-color: #ffffff;
  --radius: 4px;
  --default-height: 32px;
  --default-height-diff: 4px;
  --large-height: calc(var(--default-height) + 2 * var(--default-height-diff));
  --big-height: calc(var(--default-height) + var(--default-height-diff));
  --small-height: calc(var(--default-height) - var(--default-height-diff));
  --mini-height: calc(var(--default-height) - 2 * var(--default-height-diff));

  // Button Variables
  --btn-default-bg: #e5e7eb;
  @each $color-name, $color-values in $btn-colors {
    @each $type, $value in $color-values {
      --btn-#{$color-name}-#{$type}: #{$value};
    }
  }

  // Input Variables
  --input-border: var(--border-color);
  --input-focus-border: var(--primary);
  --input-bg: var(--bg-color);
  --input-text: var(--text-color);
}
